<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
		
		<!-- 点击关闭按钮的时候的事件处理 -->
		<script type="text/javascript">
			$(function(){
				$(".close").click(function(){
					alert("您将关闭!");
				});
			});
			
		</script>
		
		
	</head>
	<body>
	
	<h1>1-警告信息提示</h1>	
	<h2>1.1-可取消的警告（Dismissal Alerts）</h2>
	<pre>
	创建一个可取消的警告（Dismissal Alert）步骤如下：
	通过创建一个 &lt;div&gt;，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
	同时向上面的 &lt;div&gt; class 添加可选的 .alert-dismissable。
	添加一个关闭按钮。
	</pre>
	<div class="alert alert-success alert-dismissable">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="true" id="close1">
            &times;
        </button>
        成功！很好地完成了提交。
    </div>
    <div class="alert alert-info alert-dismissable">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="true">
            &times;
        </button>
        信息！请注意这个信息。
    </div>
    <div class="alert alert-warning alert-dismissable">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="true">
            &times;
        </button>
        警告！请不要提交。
    </div>
    <div class="alert alert-danger alert-dismissable">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="true">
            &times;
        </button>
        错误！请进行一些更改。
    </div>
	
	<h2>1.2-警告（Alerts）中的链接</h2>
	<pre>
	在警告（Alerts）中创建链接的步骤如下：
	通过创建一个 &lt;div&gt;，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
	使用 .alert-link 实体类来快速提供带有匹配颜色的链接。
	</pre>
	
	<div class="alert alert-success">
    <a href="#" class="alert-link">成功！很好地完成了提交。</a>
	</div>
	<div class="alert alert-info">
	    <a href="#" class="alert-link">信息！请注意这个信息。</a>
	</div>
	<div class="alert alert-warning">
	    <a href="#" class="alert-link">警告！请不要提交。</a>
	</div>
	<div class="alert alert-danger">
	    <a href="#" class="alert-link">错误！请进行一些更改。</a>
	</div>
	
	<h1>2-进度条</h1>
	<h2>2.1-默认的进度条</h2>
	<pre>
	创建一个基本的进度条的步骤如下：
	添加一个带有 class .progress 的 &lt;div&gt;。
	接着，在上面的 &lt;div&gt; 内，添加一个带有 class .progress-bar 的空的 &lt;div&gt;。
	添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。
	</pre>
	<div class="progress">
	    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
	        aria-valuemin="0" aria-valuemax="100" style="width: 66%;">
	        <span class="sr-only">40% 完成</span>
	    </div>
	</div>
	
	<h2>2.2-交替的进度条</h2>
	<pre>
	创建不同样式的进度条的步骤如下：
	添加一个带有 class .progress 的 &lt;div&gt;。
	接着，在上面的 &lt;div&gt;" 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 &lt;div&gt;。其中，* 可以是 success、info、warning、danger。
	添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。
	</pre>
	
	<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 90%;">
        <span class="sr-only">90% 完成（成功）</span>
    </div>
	</div>
	<div class="progress">
	    <div class="progress-bar progress-bar-info" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 30%;">
	        <span class="sr-only">30% 完成（信息）</span>
	    </div>
	</div>
	<div class="progress">
	    <div class="progress-bar progress-bar-warning" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 20%;">
	        <span class="sr-only">20% 完成（警告）</span>
	    </div>
	</div>
	<div class="progress">
	    <div class="progress-bar progress-bar-danger" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 10%;">
	        <span class="sr-only">10% 完成（危险）</span>
	    </div>
	</div>
	
	<h2>2.3-条纹的进度条</h2>
	<pre>
	创建一个条纹的进度条的步骤如下：
	添加一个带有 class .progress 和 .progress-striped 的 &lt;div&gt;。
	接着，在上面的 &lt;div&gt; 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 &lt;div&gt;。其中，* 可以是 success、info、warning、danger。
	添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。
	</pre>
	<div class="progress progress-striped">
	    <div class="progress-bar progress-bar-success" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 90%;">
	        <span class="sr-only">90% 完成（成功）</span>
	    </div>
	</div>
	<div class="progress progress-striped">
	    <div class="progress-bar progress-bar-info" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 30%;">
	        <span class="sr-only">30% 完成（信息）</span>
	    </div>
	</div>
	<div class="progress progress-striped">
	    <div class="progress-bar progress-bar-warning" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 20%;">
	        <span class="sr-only">20% 完成（警告）</span>
	    </div>
	</div>
	<div class="progress progress-striped">
	    <div class="progress-bar progress-bar-danger" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 10%;">
	        <span class="sr-only">10% 完成（危险）</span>
	    </div>
	</div>
	
	
	<h2>2.4-动画的进度条</h2>
	<pre>
	创建一个动画的进度条的步骤如下：
	添加一个带有 class .progress 和 .progress-striped 的 &lt;div&gt;。同时添加 <b>class .active</b>。
	接着，在上面的 &lt;div&gt; 内，添加一个带有 class .progress-bar 的空的 &lt;div&gt;。
	添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。
	这将会使条纹具有从右向左的运动感。
	</pre>
	
	<div class="progress progress-striped active">
	    <div class="progress-bar progress-bar-success" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 40%;">
	        <span class="sr-only">40% 完成</span>
	    </div>
	</div>
	
	<h2>2.5-堆叠的进度条</h2>
	<p>您甚至可以堆叠多个进度条。把多个进度条放在相同的 .progress 中即可实现堆叠</p>
	<div class="progress">
	    <div class="progress-bar progress-bar-success" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 40%;">
	        <span class="sr-only">40% 完成</span>
	    </div>
	    <div class="progress-bar progress-bar-info" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 30%;">
	        <span class="sr-only">30% 完成（信息）</span>
	    </div>
	    <div class="progress-bar progress-bar-warning" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 20%;">
	        <span class="sr-only">20% 完成（警告）</span>
	    </div>
	</div>
	
	
	</body>
</html>
